<!DOCTYPE html>
<html>
  <head>
    <!--Meta tag is used to make the webpage reponsive, controls page dimension and scaling-->
    <meta name="viewport" content="width=device-width, initail-scale=1.0" />
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="calc">
      <input type="text" placeholder="0" id="inputbox" />
      <div>
        <button class="operator">AC</button>
        <button class="operator">DEL</button>
        <button class="operator">%</button>
        <button class="operator">/</button>
      </div>
      <div>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="operator">*</button>
      </div>
      <div>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="operator">-</button>
      </div>
      <div>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="operator">+</button>
      </div>
      <div>
        <button>0</button>
        <button>00</button>
        <button class="operator">.</button>
        <button class="equal-btn">=</button>
      </div>
    </div>
    <script src="myscript.js"></script>
  </body>
</html>
